// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
    @include color-yiq($background);
    background-color: $background;
    border: 1px solid $border;
    // Disabled comes first so active can properly restyle
    &-disabled,
    &:disabled {
        background-color: $background;
        border: 1px solid $border;
        opacity: .4;
    }
    &:active,
    &-active {
        background-color: $active-background;
        border-color: $active-border;
    }
}

@mixin button-outline-variant($color, $color-active: #fff) {
    color: $color;
    background-color: transparent;
    background-image: none;
    border: 1px solid $color;
    &-disabled,
    &:disabled {
        color: $color;
        background-color: transparent;
        opacity: .4;
    }
    &:active,
    &-active {
        color: $color-active;
        background-color: $color;
        border-color: $color;
    }
}